<template>
  <div class="profile">
    <el-card>
      <!-- 面包屑导航栏 -->
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人设置</el-breadcrumb-item>
      </el-breadcrumb> -->
      <topcard>个人设置</topcard>
      <div class="content">
        <!-- 用户信息的form表单 -->
        <el-form
          ref="form"
          class="userInfo"
          :model="form"
          label-width="120px"
          :rules="rules"
        >
          <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="16">
              <el-form-item label="编号 :">100</el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="16">
              <el-form-item label="手机 :">13911111111</el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="16">
              <el-form-item label="媒体名称 :" prop="name">
                <el-input v-model="form.name"></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="16">
              <el-form-item label="媒体简介 :" prop="intro">
                <el-input
                  type="textarea"
                  v-model="form.intro"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="16">
              <el-form-item label="邮箱 :" prop="email">
                <el-input
                  type="text"
                  v-model="form.email"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"></el-col>
            <el-col :span="16">
              <el-form-item label="">
                <el-button type="primary" @click="submit">保存设置</el-button>
              </el-form-item></el-col
            >
          </el-row>
        </el-form>
        <!-- 上传图片 -->
        <el-upload
          class="avatar-uploader"
          action=""
          name="image"
          :http-request="upload"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>
<script>
// 导入map辅助函数
import { mapMutations } from 'vuex'
// 导入api
import { modUserProfile, userGetProfile, moduserImage } from '@/api/user.js'
export default {
  data () {
    return {
      form: {
        // 名字
        name: '',
        // 简介
        intro: '',
        // 邮箱
        email: ''
      },
      // 验证规则
      rules: {
        name: [
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'change' }
        ],
        intro: [{ max: 100, message: '最大字数在100字以内', trigger: 'blur' }],
        email: [
          {
            validator: (rule, value, callback) => {
              if (/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
                callback()
              } else {
                callback(new Error('邮箱格式错误'))
              }
            },
            trigger: 'change'
          }
        ]
      },
      // 图片路径
      imageUrl: ''
    }
  },
  created () {
    userGetProfile()
      .then(res => {
        this.imageUrl = res.data.photo
        // 注意： res.data.data 这里有两层.data才能取回真正的数据
        this.form = res.data
      })
      .catch(err => {
        console.dir(err)
        // 401表示没有权限
        if (err.response.status === 401) {
          //
          alert('无权访问')
          this.$router.push('/login')
        }
      })
  },

  methods: {
    ...mapMutations(['EDITUSERINFO']),
    async upload (file) {
      const fd = new FormData()
      fd.append('photo', file.file)
      const res = await moduserImage(fd)
      this.imageUrl = res.data.photo
      this.$eventBus.$emit('editPhoto', res.data.photo)
      // 提示用户
      this.$message.success('图片上传成功')
    },

    // 图片上传前的回调函数
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 提交修改内容
    submit () {
      // 判断是否验证通过
      this.$refs.form.validate(v => {
        if (v) {
          modUserProfile(this.form).then(res => {
            // 提示用户
            this.$message.success('修改成功')
            const data = res.data
            data.photo = this.imageUrl
            // 更新vuex仓库
            this.EDITUSERINFO(res.data)
            // 跳转到首页
            this.$router.push('/')
          })
        } else {
          this.$message.error('请填写正确的内容')
        }
      })
    }
  }
}
</script>
<style lang="less">
.profile {
  .content {
    display: flex;

    justify-content: space-around;
    .userInfo {
      width: 618px;

      margin-top: 20px;
    }
  }
  /* 上传组件 */
  .avatar-uploader .el-upload {
    margin-top: 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
